<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页查询示例</title>
<link href="../plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript"
	src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<link href="../plugin/bootstrap-table/dist/bootstrap-table.min.css"
	rel="stylesheet">
<link href="../plugin/admin/css/materialdesignicons.min.css"
	rel="stylesheet">
<link href="../plugin/admin/css/animate.css" rel="stylesheet">
<link href="../plugin/admin/css/style.min.css" rel="stylesheet">
<script type="text/javascript"
	src="../plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript"
	src="../plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
	<div class="container-fluid p-t-15">

		<div class="row">
			<div class="col-lg-12">
				<div class="card">
					<div class="card-header">
						<h3>轮播广告管理</h3>
					</div>
					<div class="card-body">

						<div id="toolbar" class="toolbar-btn-action">
							<button id="btn_add" type="button" class="btn btn-primary m-r-5"
								data-toggle="modal" data-target="#addModal">
								<span class="mdi mdi-plus" aria-hidden="true"></span>新增
							</button>
							<button id="btn_delete" type="button" class="btn btn-danger">
								<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
							</button>
						</div>
						<table id="mytab"></table>

					</div>
				</div>
			</div>
		</div>

	</div>

	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增轮播图</h4>
				</div>
				<div class="modal-body">
					<label>名称&emsp;<input type="text" id="postername"
						name="postername" /></label>&emsp;&emsp; <label><input
						type="file" id="upload" name="upload" /></label> <br> <label>状态&emsp;<input
						type="text" id="state" name="state" placeholder="请输入1或者0" /></label><br>
					<label>备注&emsp;<input type="text" id="remark" name="remark" /></label><br>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addPoster" type="button" class="btn btn-primary"
						data-dismiss="modal" onclick="add()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改轮播图</h4>
				</div>
				<div class="modal-body">
					<label>名称&emsp;<input type="text" id="posterName"
						name="posterName" /></label>&emsp;&emsp; <label><input
						type="file" id="Upload" name="Upload" /></label> <br> <label>状态&emsp;<input
						type="text" id="State" name="State" placeholder="请输入1或者0" /></label><br>
					<label>备注&emsp;<input type="text" id="Remark" name="Remark" /></label><br>
					<input type="hidden" id="Posterid" /> <input type="hidden"
						id="Posterpath" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addPoster" type="button" class="btn btn-primary"
						data-dismiss="modal" onclick="Posterupdate()">保存</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../plugin/admin/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../plugin/admin/js/lightyear.js"></script>
<script type="text/javascript" src="../plugin/admin/js/main.min.js"></script>
<script>
$('#mytab').bootstrapTable({
    /*全部参数*/
    url: "../poster/posterlist",                     //从后台获取数据时，可以是json数组，也可以是json对象
    dataType: "json",
    method: 'get',                      //请求方式（*）
    toolbar: '#toolbar',                //工具按钮用哪个容器
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: true,                     //是否启用排序
    sortOrder: "asc",                   //排序方式
    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）,数据为json数组时写client，json对象时（有total和rows时）这里要为server方式，写client列表无数据*/
    pageNumber: 1,                       //初始化加载第一页，默认第一页
    pageSize: 2,                       //每页的记录行数（*）
    pageList: [3, 2, 5, 6],        //可供选择的每页的行数（*）
    /*search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大*/
    strictSearch: true,
    showColumns: true,                  //是否显示所有的列
    showRefresh: true,                  //是否显示刷新按钮
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    /*height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度*/
    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
    showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    //得到查询的参数
    queryParams: function (params) {
        //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的，如果加搜索条件放在这里
        var query_params = {
            userNum:$("#userNum").val(),
            userName:$("#userName").val(),
            pageSize: params.limit,                         //页面大小
            pageNum: (params.offset / params.limit) + 1   //页码
        };
        return query_params;
    },
    columns: [
        {
            checkbox: true//第一列显示复选框
        },
        {
            field: 'id',  //返回数据rows数组中的每个字典的键名与此处的field值要保持一致
            title: '编号'
        },
        {
            field: 'name',
            title: '名称'
        },
        {
            field: 'path',
            title: '路径'
        },
        {
            field: 'state',
            title: '状态'
        },
        {
            field: 'remark',
            title: '备注'
        },
        {
            field: 'yesANDno',
            title: '开关',
            formatter: showState
        },
        {
            field: 'img',
            title: '图片',
            width: 300,
            height:200,
            align: 'center',
            valign: 'middle',
            formatter: showpathImg,
        },
        {
            field: 'operate',
            title: '操作',
            width: 120,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter,
            events: {
                'click .edit-btn': function (event, value, row, index) {
                    editUser(row.id,row.name,row.state,row.remark,row.path);
                },
                'click .del-btn': function (event, value, row, index) {
                    delUser(row.id);
                }
            }
        },
    ],
    onLoadSuccess: function () {
        $('#mytab').bootstrapTable('resetView', {
            height: getAutoHeight()
        });
    },
    responseHandler: function(res) {
        return {
            "total": res.total,//总页数
            "rows": res.list //数据
        };
    }
});
function actionFormatter(value, row, index) {
    var result;
    result = "<a href='#!' class='btn btn-xs blue edit-btn' title='编辑'  data-toggle='modal' data-target='#editModal'><span class='glyphicon glyphicon-pencil'></span></a>"+
    '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return result;
    //console.log(row.id)
}

function showpathImg(value, row, index){
	var result;
	result = "<img src='"+row.path+"'/>";
	return result;
}

function showState(value, row, index){
	var result;
	if(row.state==1){
		result="<label class='lyear-switch switch-solid switch-cyan'><input id='posterState' type='checkbox' checked='' onclick='chageSate("+row.id+","+row.state+")'> </lable> <span></span>";	
	}else{
		result="<label class='lyear-switch switch-solid switch-cyan'><input id='posterState' type='checkbox' onclick='chageSate("+row.id+","+row.state+")'> </lable> <span></span>";	
	}
	return result;
}

//操作方法 - 编辑    <回填数据>
function editUser(id,name,state,remark,path)
{
	alert('编辑信息跳转模态框'+id);
	
	$("#posterName").val(name);
	$("#State").val(state);
	$("#Remark").val(remark);
	$("#Posterid").val(id);
	$("#Posterpath").val(path);
    /* alert('编辑信息跳转模态框'+id);
	$.ajax({
		url : '../poster/getId',
		dataType : "json",
		type : 'POST',
		cache : false,
		data : {
			id : id,
		},
		success : function(data) {
			//alert()
		}
	}); */
    
};
/* update 轮播图的信息 */
function Posterupdate(){
	alert("12334")
	var formData = new FormData();
	formData.append('upload', $('#Upload')[0].files[0]);  //添加图片信息的参数
	 //alert(formData)
	 $.ajax({
         type: "POST",
         url:"../basefile/uploadImage",
         data:formData,
         contentType: false,
         processData: false,
         dataType:"json",
         success: function(data) {
        	 console.log(data["url"])
        	var path=data["url"];
        	 if(path==""&&path==null&&path==undefined){
        		 console.log("######")
        		 path=$("#Posterpath").val();
        	 }       	  
 			$.ajax({
				url : '../poster/updatePoster',
				type : 'POST',
				dataType:"json",
				data : {
					id: $("#Posterid").val(),
					name : $("#posterName").val(),
					path : path,
					state : $("#State").val(),
					remark: $("#Remark").val()
				},
				success : function(obj) {
					//alert("88888小伟");
					if(obj.result==1){
						alert("正在刷新页面，请不要眨眼")
					window.location.reload();
					}
				}
			});
        	 
         }
     });
	
}

// 操作方法 - 删除
function delUser(id)
{
	alert('信息删除成功'+id);
	$.ajax({
		url : '../poster/delRow',
		dataType : "json",
		type : 'POST',
		cache : false,
		data : {
			id : id,
		},
		success : function(data) {			
			console.log(data.result);
			if (data.result == 1) {
				lightyear.loading('show');
				// 假设ajax提交操作
				setTimeout(function() {
					lightyear.loading('hide');
					lightyear.notify('删除成功!', 'success', 1000);
				}, 1e3),
				  setTimeout(function() {
					  window.location.reload();  
				  },3000)
				//window.location.reload();
			}
		}
	});
	
}

/* 跟新状态 */
function chageSate(id,state){
	$.ajax({
		url : '../poster/updateState',
		dataType : "json",
		type : 'POST',
		cache : false,
		data : {
			id : id,
			state : state
		},
		success : function(data) {			
			console.log(data.result);
			if (data.result == 1) {
				lightyear.loading('show');
				// 假设ajax提交操作
				setTimeout(function() {
					lightyear.loading('hide');
					lightyear.notify('修改成功!', 'success', 1000);
				}, 1e3),
				  setTimeout(function() {
					  window.location.reload();  
				  },3000)
				//window.location.reload();
			}
		}
	});
}
//搜索查询按钮触发事件
$(function () {
    $("#search-button").click(function () {
        $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
/*         $('#userNum').val()
        $('#userNum').val() */
    })
})
//重置搜索条件
function clean() {
    //先清空
    $('#userNum').val('');
    $('#userName').val('');
    //清空后查询条件为空了，再次刷新页面，就是全部数据了
    $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
}
//敞口大小改变自动执行
$(window).resize(function () {
    $('#mytab').bootstrapTable('resetView', {
        height: getAutoHeight()
    });
});
function getAutoHeight() {
    //当前窗口高度
    var panelH = $(window).height();
    //拿到顶部工具栏高度
    var toolBarH = $(".fixed-table-toolbar").height();
    //计算表格container该设置的高度
    var height = panelH - toolBarH;
    return height;
};
	/* 添加轮播图 */
function add() {
		alert("666进来了");
		var formData = new FormData();
		formData.append('upload', $('#upload')[0].files[0]);  //添加图片信息的参数
		 //alert(formData)
		 $.ajax({
             type: "POST",
             url:"../basefile/uploadImage",
             data:formData,
             contentType: false,
             processData: false,
             dataType:"json",
             success: function(data) {
            	 console.log(data["url"])
            	var path=data["url"];
     			$.ajax({
    				url : '../poster/savePoster',
    				type : 'POST',
    				dataType:"json",
    				data : {
    					name : $("#postername").val(),
    					path : path,
    					state : $("#state").val(),
    					remark: $("#remark").val()
    				},
    				success : function(obj) {
    					//alert("88888小伟");
    					if(obj.result=="success"){
    						alert("正在刷新页面，请不要眨眼")
    					window.location.reload();
    					}
    				}
    			});
            	 
             }
         });
};
</script>
</html>